<template>
    <div class='pwd-login container'>
        <Header></Header>
        <section>
            <div class='ipt'>
                <input type="text" pattern="[0-9]*" placeholder="请输入手机号" v-model='userTel'>
            </div>
            <div class='ipt'>
                <input type="text" placeholder="请输入密码" v-model='userPwd'>
            </div>
            <div class='login-btn' @click='login'>登录</div>
            <ul class='login-list'>
                <li @click='goLogin'>
                    <i class='iconfont icon-kefu'></i>
                    <span>短信登录</span>
                </li>
                <li @click='goRecovery'>
                    <i class='iconfont icon-kefu'></i>
                    <span>找回密码</span>
                </li>
                <li @click='goRegister'>
                    <i class='iconfont icon-kefu'></i>
                    <span>快速注册</span>
                </li>
            </ul>
        </section>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Header from './Header'
import Tabbar from '@/components/common/Tabbar.vue'
import { Toast } from 'mint-ui';
import http from '@/common/api/request.js'
import {mapMutations} from 'vuex'
export default{
    data () {
        return {
            userTel:'',//用户输入的手机号
            userPwd:'',//用户输入的密码
            rules:{//判断规则
                userTel:{
                    ruls:/^1[3456789]\d{9}$/,
                    msg:'请输入11位有效手机号'
                },
                userPwd:{
                    ruls:/^\w{6,12}$/,
                    msg:'请输入6-12位密码，且不能为空'
                }
            }
        }
    },
    components:{
        Header,
        Tabbar
    },
    methods:{
        ...mapMutations(['initUser']),
        //点击登录
        login(){
            //前端先去判断，手机号 | 密码  格式正确吗？
            if(  !this.validate( 'userTel' )  ) return;
            if(  !this.validate( 'userPwd' )  ) return;
            //发送请求===>后端去判断手机号和密码对不对?
            http.$axios(  {
            	url:'/api/login',
                method:'post',
                data:{
                    tel:this.userTel,
                    pwd:this.userPwd
                }
            }).then(res=>{
                console.log( res );
                Toast( res.msg );
                if( !res.success ) return;
                //登录陈工 进入我的页面
                this.initUser( res.data  )
                this.$router.push('/my')
            })
        },
        //验证判断条件
       validate( params ){
            let bool = true;
            //如果输入格式不正确,提示信息
            if( !this.rules[params].ruls.test( this[params] )  ){
                Toast(this.rules[params].msg);
                bool=false;
                return bool;
            }
            return bool;
        },
        //登录
        goLogin(){
            this.$router.push('/login');
        },
        //注册
        goRegister(){
            this.$router.push('/register');
        },
        //找回密码
        goRecovery(){
            this.$router.push('/recovery');
        }
    }
}
</script>

<style scoped lang='scss'>
section{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:0.8rem 0.4rem;
    font-size:0.373333rem;
    background-color: #f5f5f5;
    .ipt{
        margin:0.266666rem 0;
        width: 8.933333rem;
        height: 1.173333rem;
        input{
            box-sizing: border-box;
            padding:0 0.266666rem;
            width: 100%;
            height: 100%;
            background-color: #FFFFFF;
            border-radius: 6px;
        }
    }
    .login-btn{
        width: 8.933333rem;
        margin-top:0.266666rem;
        line-height: 1.2rem;
        color:#fff;
        text-align: center;
        background-color: #b0352f;
        border-radius: 6px;
    }
    ul{
        margin:0.533333rem 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size:0.426666rem;
    }
}
::v-deep .tabbar{
   border-top:2px solid #ccc;
}
</style>

